<template>
	<div class="ele-body">
		<el-card class="box-card">
			<div class="buju">
				<div class="bujuleft">头像</div>
				
				<div>
					<el-upload class="avatar-uploader" :action="url+'back/common/upload'" :show-file-list="false"
						:headers="headers" :on-success="handleAvatarSuccess">
						<img v-if="UserInfo.avatar" :src="imgurl+UserInfo.avatar" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</div>
			</div>
			<div class="buju">
				<div class="bujuleft">平台名称</div>
				<div>
					<el-input v-model="UserInfo.companyname" placeholder="请输入内容"></el-input>
				</div>
			</div>
			<div class="buju">
				<div class="bujuleft">账号名称</div>
				<div>
					<el-input v-model="UserInfo.nickname" placeholder="请输入内容"></el-input>
				</div>
			</div>
			
			<div class="buju">
				<div class="bujuleft">登陆账号</div>
				<div>{{UserInfo.username}}</div>
			</div>
			<div class="buju">
				<div class="bujuleft"></div>
				<el-button type="primary" @click="submit()">确认修改</el-button>
			</div>
		</el-card>
	</div>
</template>

<script>
	import setting from '@/config/setting';
	export default {
		data() {
			return {
				url: process.env.VUE_APP_API_BASE_URL,
				imgurl:process.env.VUE_APP_IMG_BASE_URL,
				headers: {
					token: setting.takeToken()
				},
				UserInfo: {},
			}
		},
		mounted() {
			this.getmsg();
		},
		methods: {
			getmsg() {
				this.$http.get('/back/profile/getUserInfo').then((res) => {
					this.UserInfo = res.data.data;
				});
			},
			//上传头像
			handleAvatarSuccess(res) {
				this.$set(this.UserInfo, 'avatar', res.code.url)
				
				console.log(res.code.url)
			},
			submit() {
				this.$http.post('/back/profile/edit', {
					nickname: this.UserInfo.nickname,
					avatar: this.UserInfo.avatar
				}).then(res => {
					if (res.data.code == 1) {
						this.$message({
							message: res.data.msg,
							type: 'success'
						});
						this.getmsg();
						window.location.reload();
					} else {
						this.$message.error(res.data.msg);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.buju {
		margin-top: 18px;
		margin-bottom: 18px;
		display: flex;
		align-items: center;
	}

	.bujuleft {
		min-width: 120px;
		text-align: right;
		padding-right: 32px;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
